@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-08-29 16:02:17
 * @version $Id$
 */
 @import '../../../public_src/css/lessParams.less';
 html{
 	font-size: 750px;
 	display: block!important;
 }
.service{
	min-height: 100%;
	background-color: #ebebeb;
	font-size: 30*@font-cale;
	color: #5f5f5f;
	padding-top: 115*@font-cale;
	overflow-x: hidden;
	.chat-container{
		padding-right: 20*@font-cale;
		padding-left: 20*@font-cale;
		padding-bottom: 100*@font-cale;
		border: 1px solid transparent;
		.receive-info{
			text-align: left;
			margin-bottom: 40*@font-cale;
			.content{
				margin-left: 110*@font-cale;
			}
		}
		.send-info{
			text-align: right;
			margin-bottom: 40*@font-cale;
			.content{
				margin-right: 110*@font-cale;
			}
		}
		.url-style{
			text-decoration: underline;
			color: #01b8ff;
		}
		.avatar{
			width: 84*@font-cale;
			height: 84*@font-cale;
			margin-top: 4*@font-cale;
			background-color: #fff;
			//border-radius: 50%;
		}	
		.time{
			color: #acacac;
			font-weight: 300;
			font-size: 22*@font-cale;
			margin-bottom: 6*@font-cale;
		}	
		.msg{
			position: relative;
			border-radius: 8*@font-cale;
			display: inline-block;
			max-width: 470*@font-cale;
			min-height: 70*@font-cale;
			font-size: 28*@font-cale;
			padding: 15*@font-cale 22*@font-cale;
			word-wrap:break-word;
			word-break:break-all;
			.img-container{
				height: 600*@font-cale;
				margin-top: 6*@font-cale;
				margin-bottom: 6*@font-cale;
				overflow: hidden;
				font-size: 0;
			}
			.img-start{
				width: (470-22-22)*@font-cale;
				position: relative;
				img{
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate3d(-50%, -50%, 0);
					   -moz-transform: translate3d(-50%, -50%, 0);
					    -ms-transform: translate3d(-50%, -50%, 0);
					     -o-transform: translate3d(-50%, -50%, 0);
					        transform: translate3d(-50%, -50%, 0);
				}
			}
			img{
			}
			&:before {
				width: 21*@font-cale;
				height: 21*@font-cale;
				position: absolute;
				top: 20*@font-cale;
			}
		}
		.receive-color{
			color: #fff;
			border: 1px solid #4d90fe;
			background-color: #4d90fe;
			&:before {
				width: 18*@font-cale;
				height: 18*@font-cale;
				left: -17*@font-cale;
				content: '';
				background: data-uri('../imgs/patch_b.png') no-repeat center center;
				background-size: 100%;
			}
		}
		.send-color{
			color: #5f5f5f;
			background-color: #fff;
			border: 1px solid #dddddd;
			&:before {
				right: -16*@font-cale;
				content: '';
				background: data-uri('../imgs/patch_w.png') no-repeat center center;
				background-size: 100%;
			}
		}
	}
	.send-msg{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100*@font-cale;
		font-size: 0;
		padding: 14*@font-cale;
		padding-right: 20*@font-cale;
		background-color: #f4f4f6;
		border-top: 1px solid #dddddd;
		justify-content: center;
		-webkit-justify-content: center;
		align-content: center;
		-webkit-align-content: center;
		.send-input{
			//width: 526*@font-cale;
			width: 626*@font-cale;
			height: 70*@font-cale;
			padding: 22*@font-cale;
			border: 1px solid #dddddd;
			border-radius: 5px;
			font-size: 32*@font-cale;
			vertical-align: middle;
		}
		.send-img{
			position: relative;
			margin: 5*@font-cale 20*@font-cale;
			margin-right: 0;
			width: 70*@font-cale;
			height: 60*@font-cale;
			background: data-uri('../imgs/send_img.png') no-repeat center center;
			background-size: 100%;
			vertical-align: middle;
			.img-input{
				opacity: 0;
				position: absolute;
				width: 70*@font-cale;
				height: 60*@font-cale;
				top: 0;
				left: 0;
			}
		}
		.send-btn{
			background-color: #4d90fe;
			color: #fff;
			border-radius: 4px;
			font-weight: 300;
			font-size: 28*@font-cale;
			height: 60*@font-cale;
			margin: 5*@font-cale 0;
			margin-left: 20*@font-cale;
			padding-left: 12*@font-cale;
			padding-right: 12*@font-cale;
			vertical-align: middle;
		}
	}
	.img-enlarge-bg{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #191919;
		z-index: 100000;
		text-align: center;
	}
	.img-enlarge{
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0)!important;
		-webkit-transform: translate3d(-50%, -50%, 0)!important;
	}
	//新消息气泡提示
	.has-msg{
		position: fixed;
		right: 20*@font-cale;
		bottom: 110*@font-cale;
		background-color: #fff;
		color: #ee453b;
		padding: 6*@font-cale 10*@font-cale;
		border-radius: 31*@font-cale;
		font-size: 20*@font-cale;
	}
}